<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/sys/css.jsp" %>
<html lang="zh-cmn-Hans">
<head>
    <title>
    </title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/modules/util/static/ztree/css/demo.css"
          type="text/css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/modules/util/static/ztree/css/metroStyle/metroStyle.css"
          type="text/css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/jquery.scrollbar.css" type="text/css"/>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/modules/util/static/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/modules/util/static/ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/modules/util/static/ztree/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/modules/util/static/ztree/js/jquery.ztree.exhide.min.js"></script>
            
    <script type="text/javascript" src="${pageContext.request.contextPath}/ui/js/jquery.scrollbar.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/viewtable.css" media="all">
    <style>
        .allContent {
            height: 100%;
        }

        .treeContent {
            height: 100%;
            width: 96%;
            float: left;
        }

        .treeContent .treetip {
            color: red;
            width: 100%;
            border-top: solid 1px #ccc;
            text-align: center;
            padding: 6px;
        }

        #treeContentCont {
            height: calc(100% - 100px);
            overflow: hidden;
        }

        div#rMenu {
            position: absolute;
            display: none;
            top: 0;
            text-align: left;
            padding: 2px;
        }

        div#rMenu ul {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            font-size: 14px;
            text-align: left;
            list-style: none;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid #ccc;
            border: 1px solid rgba(0, 0, 0, .15);
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        }

        div#rMenu ul li {
            margin: 1px 0;
            padding: 0 5px;
            cursor: pointer;
            list-style: none outside none;
        }

        .viewTable th {
            height: 55px;
            line-height: 55px;
            width: 70px
        }

        .layui-layer-title {
            background: #009f95;
            color: #fff;
            border: none;
        }

        /*extra*/
        #search_inp {
            width: calc(100% - 24px);
            border-radius: 5px;
            outline: none;
            border: 2px solid #ccc;
            margin: 6px;
            padding: 3px;
        }

        .ztree li span.button.my_center_docu {
            background-position: -84px -21px;
        }

        .ztree li span.button.my_bottom_docu {
            background-position: -84px -42px;
        }

        .allContent > p {
            margin-top: 12px;
        }

        .ztree li span.button[class*=ico_] {
        background-image: url(../../style/images/organization.png);
       
            background-size: contain;
            background-position: 0 0 !important;
        }

        .ztree li span.button.ico_docu {
            background-size: contain;
            background-position: 0 0;
            width: 18px;
            height: 18px;
        }

        .ztree li span.button.ico_docu {
    
        }
      
        .ztree li a {
            height: 25px;
        }

        .ztree li span.button.switch {
            height: 25px;
        }

        .treetip {
            display: flex;
            justify-content: center;
        }

        .ztree li a:hover {
            text-decoration: none;
        }

        .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
            background: #638ffd;
            width: 10px;
        }

        .mCSB_scrollTools .mCSB_draggerRail {
            background: #e2dede;
            width: 10px;
        }
    </style>
    <script type="text/javascript">
        var layer;
        layui.use(['layer'], function () {
            layer = layui.layer;
        });
        var selectID = ${selectID};
        var setting;
       
        	setting = {
    	            data: {
    	                simpleData: {
    	                    enable: true,
    	                    idKey: "id",
    	        			pIdKey: "pid"
    	                }, key: {
                            name: "name"
                        }
    	            },
    	            check: {
    	                enable: true,
    	                autoCheckTrigger: true
    	            },
    	            callback: {
    	            //	onCheck: zTreeOnCheck,//勾选事件回调函数
    	                onAsyncSuccess: zTreeOnAsyncSuccess,
    	                onClick: selectVal
    	             //	beforeCheck: zTreeBeforeCheck
    	            }/* , async: {
    	                enable: false,
    	                url: "${pageContext.request.contextPath}/workflow/appr/ztree",
    	                autoParam: ["id", "name"],
    	                otherParam: {"otherParam": "zTreeAsyncTest"}
    	            } */

    	        };
      
	
        var zNodes = [];
        var rMenu, zTree;
        $(document).ready(function () {
            $(parent.document).find("[id^=layui-layer-iframe]").attr("scrolling", "no");
            var zTreeType='${chkType}';
            if(zTreeType=='radio'){
                setting.check.chkStyle='radio';
            }
            zTree = $.fn.zTree.init($("#treeContent"), setting, selectID);
            rMenu = $("#rMenu");
            var treeObj = $.fn.zTree.getZTreeObj("treeContent");
            var nodes = treeObj.getNodes();
            
            if("unionOrg"=="${type}"){
            	 for (var i = 0; i < nodes.length; i++) { //设置节点展开
                     treeObj.expandNode(nodes[i], true, false, true);
                 }
            }
         
             //带入上次选择的值
            var selecValue = $(parent.document).find("input[id=${Code}]").val();
            if (selecValue != null && selecValue != '' && selecValue != undefined) {
                var trObj = $.fn.zTree.getZTreeObj("treeContent");
                var arr = selecValue.split(",");
                for (var i = 0; i < arr.length; i++) {
                    var node = trObj.getNodeByParam("id", arr[i]);//根据ID找到该节点
                    trObj.selectNode(node);//根据该节点选中
                    trObj.checkNode(node, true, true);
                }
            }
            addScroll();
			//搜索框
            $("#search_inp").keyup(inputChangeFun);
            
            function inputChangeFun() {
                var curInp = $(this);

                setTimeout(function () {
                	  var curKeyword = curInp.val();
                	  var hiddenNodes=[];
                	  var showNodes=[];
                	   var childNodes = treeObj.transformToArray(treeObj.getNodes());
                	      var pid;
                	      for ( var i = 0;i < childNodes.length; i++) {
	                		 	var node =childNodes[i];
	                		 	if(node.name.indexOf(curKeyword)==-1&&!node.isParent){
	                		 		 hiddenNodes.push(node);
	                		 	}else{
	                		 		if(node.id!='U00001'){
	                		 			var result=false;
	                		 			if(node.children==null||typeof(node.children)=='undefined'){
	                		 				continue;
	                		 			}
		                		     	for ( var j = 0;j < node.children.length; j++) {
		                        	          var tmp_node=node.children[j];
		                        	    		if(tmp_node.name.indexOf(curKeyword)==-1){
		                        		 			 hiddenNodes.push(tmp_node);
		                        				  }else{
		                        					  result=true;
		                        					  showNodes.push(tmp_node);
		                        				  }
		                        	    }
		                		  		if(!result){
		                		  			 hiddenNodes.push(node);
		                		  		}else{
		                		  		 	 showNodes.push(node);
		                		  		}
	                		 		}else{
	                		 			 showNodes.push(node);
	                		 		}
	                		 	}
                	      }
                	  	  
                	  treeObj.hideNodes(hiddenNodes);
                	  treeObj.showNodes(showNodes);
                	  treeObj.expandAll(true);
                }, 400);
            }
            
            
	      	  $(".button.level1.switch").click(function () {
	      		setTimeout(function () {
	                  addScroll(); 
	              }, 400);
		      });
	      	$(".button.level0.switch").click(function () {
	      		setTimeout(function () {
	                  addScroll(); 
	              }, 400);
		      });
		      function addScroll() {
		          //加滚动条
		          var curParentJq = $("#treeContentCont");
		          var curChildJq = curParentJq.find("#treeContent");
		          var showHeight = curParentJq.height();
		          var sumDomHeight = curChildJq.height();
		          curParentJq.mCustomScrollbar("destroy");
		         if (sumDomHeight > showHeight) {
		              curParentJq.mCustomScrollbar({
		                  scrollInertia: showHeight * showHeight / sumDomHeight
		              });
		          }
		      }
		

		   
		       function bindRelClick() {
		          $(liSelStr + ">a").each(function () {
		              if ($(this).attr("hasBind") == "true") {
		                  return;
		              }
		              $(this).attr("hasBind", "true");
		              $(this).click(function () {
		                  $(this).prev().click();
		              });
		          });
		      } 
        });
        
        
 
    /*      function zTreeOnCheck(event, treeId, treeNode) {
        	  var treeObj = $.fn.zTree.getZTreeObj("treeContent");
     			//treeObj.checkAllNodes(false);//取消所有节点的选中状态
              if(treeNode.checked){    //注意，这里的树节点的checked状态表示勾选之后的状态
            	treeObj.checkAllNodes(false);//取消所有节点的选中状态
            	treeObj.checkNode(treeNode,true,false,false);//重新选中被勾选的节点 
            } 
   		}  */
        function zTreeBeforeCheck(treeId, treeNode) {
   		   var treeObj = $.fn.zTree.getZTreeObj("treeContent");
   			treeObj.checkAllNodes(false);//取消所有节点的选中状态
            return true;//当是父节点 返回false 不让选取
       }
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
            if (selectID != null && selectID != "" && selectID != undefined) {
                var node = zTree.getNodeByParam("id", selectID);
                
                zTree.selectNode(node);
                zTree.setting.callback.onClick(null, zTree.setting.treeId, node);
                selectID = "";
            }
        };
        function selectVal(e, treeId, treeNode, clickFlag) {
        		 zTree.checkNode(treeNode, !treeNode.checked, true);
        }
        function SaveonCheck(e, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj("treeContent"),
                nodes = treeObj.getCheckedNodes(true);
            var dot = "";
            var nodesid = "";
            var nodesname = "";
            if('radio'=='${chkType}'){
            	if(nodes.length>1){
            		alert("只能选择一个选项！");
            		return false;
            	}
            }
            for (var i = 0; i < nodes.length; i++) {
            	if(nodes[i].isParent){//||nodes[i].pid=='0'||nodes[i].pid==null
            		continue;
            	}
                if (nodesid == "") {
                    nodesid += nodes[i].id;
                } else {
                    nodesid += "," + nodes[i].id;
                }
                if (nodesname == "") {
                    nodesname += nodes[i].name;
                } else {
                    nodesname += "," + nodes[i].name;
                }
            }
            parent.additem(nodesid, nodesname, '${Name}', '${Code}');
            CloseWin();
        };
    </script>
</head>

<body>
<div class="allContent">
    <input id="search_inp" autocomplete="off"/>
    <div id="treeContentCont">
        <div class="ztree" id="treeContent">
        </div>
    </div>
    <p class="treetip" style="text-align: center">
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="SaveonCheck()">确认</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="CloseWin()">关闭</button>
    </p>
</div>
</body>
</html>
